<template>
	<div class='container'>
		<h1>自定义</h1>
		<div id='custom-id'></div>
		<h1>不等宽柱形图</h1>
		<div id='custom-id2'></div>
	</div>
</template>

<script>
import echarts from './chart'
export default {
	data () {
		return {
			drilldownData: [
				{
					dataGroupId: '1',
					data: [
						{
							name: '第一矿',
							val1: { value: 5, groupId: '1' }
						},
						{
							name: '第二矿',
							val1: { value: 8, groupId: '2' }
						},
						{
							name: '第三矿',
							val1: { value: 13, groupId: '3' }
						}
					]
				},
				{
					dataGroupId: '2',
					data: [
						{
							name: '第四矿',
							val1: { value: 5, groupId: '1' }
						},
						{
							name: '第五矿',
							val1: { value: 8, groupId: '2' }
						},
						{
							name: '第六矿',
							val1: { value: 13, groupId: '3' }
						}
					]
				},
				{
					dataGroupId: 'cars',
					data: [
						['Toyota', 4],
						['Opel', 2],
						['Volkswagen', 2]
					]
				}
			]
		}
	},
	methods: {
		drawLine () {
			// 基于准备好的dom，初始化echarts实例
			let myChart = echarts.init(document.getElementById('custom-id'))
			// 绘制图表
			const option = {
				title: {
					show: false,
					text: ''
				},
				tooltip: {
					trigger: 'axis'
				},
				dataZoom: {
					type: 'slider'
				},
				grid: {
					top: '40',
					right: '10',
					left: '10',
					bottom: '30',
					containLabel: true
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						data: [0, 932, 0, 1290, 1290, 0, 0],
						type: 'line',
						step: 'end',
						areaStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[
										{
											offset: 1,
											color: 'rgba(245, 80, 71, 0.30)'
										},
										{
											offset: 0,
											color: 'rgba(245, 80, 71, 1)'
										}
									],
									false
								)
							}
						}
					}
				]
			}
			myChart.setOption(option)
		},
		drawLine2 () {
			const DAY = 24 * 60 * 60 * 1000
			const day1 = 1690533530195
			const day2 = day1 + DAY
			const day3 = day2 + DAY
			const day4 = day3 + DAY
			const day5 = day4 + DAY
			const day6 = day5 + DAY
			const day7 = day6 + DAY
			const itemColor = new echarts.graphic.LinearGradient(
				0,
				0,
				0,
				1,
				[
					{
						offset: 1,
						color: 'rgba(245, 80, 71, 0.30)'
					},
					{
						offset: 0,
						color: 'rgba(245, 80, 71, 1)'
					}
				],
				false
			)
			var data = [
				{
					value: [day1, day2, 0.1, 'A'],
					borderColor: '#246FE5'
				},
				{
					value: [day2, day4, 20, 'B'],
					borderColor: 'rgba(245, 80, 71, 1)'
				},
				{
					value: [day4, day5, 0.1, 'C'],
					borderColor: '#246FE5'
				},
				{
					value: [day5, day6, 0.1, 'D'],
					borderColor: '#246FE5'
				},
				{
					value: [day6, day7, 20, 'E'],
					borderColor: 'rgba(245, 80, 71, 1)'
				}

			]

			data = echarts.util.map(data, function (item, index) {
				return {
					value: item.value,
					itemStyle: {
						normal: {
							borderWidth: 2,
							borderColor: item.borderColor,
							color: itemColor
						}
					}
				}
			})

			function renderItem (params, api) {
				var yValue = api.value(2)
				var start = api.coord([api.value(0), yValue])
				var size = api.size([api.value(1) - api.value(0), yValue])
				var style = api.style()

				return {
					type: 'rect',
					shape: {
						x: start[0],
						y: start[1],
						width: size[0],
						height: size[1]
					},
					style: style
				}
			}

			const option = {
				dataZoom: {
					type: 'slider'
				},
				tooltip: {
					formatter: ''
				},
				xAxis: [
					{
						scale: true
						// type: 'category',
						// boundaryGap: false,
						// data: [day1, day2, day3, day4, day5, day6, day7]
					},
					{
						show: false
					}
				],
				yAxis: {},
				series: [
					{
						type: 'custom',
						renderItem: renderItem,
						label: {
							normal: {
								show: true,
								position: 'top'
							}
						},
						// dimensions: ['from', 'to', 'profit'],
						encode: {
							x: [0, 1],
							y: 2,
							tooltip: [0, 1, 2],
							itemName: 3
						},
						data: data
					},
					{
						type: 'bar',
						xAxisIndex: 1,
						// markLine: {
						// 	data: [
						// 		{
						// 			name: '平均线',
						// 			// 支持 'average', 'min', 'max'
						// 			type: 'average'
						// 		}
						// 	]
						// },
						cursor: 'default',
						itemStyle: {
							// color: 'transparent',
							opacity: 0
						},

						tooltip: {
							show: false
						},
						data: [3, 15, 12, 22, 7, 17]
					}
				]
			}

			// 基于准备好的dom，初始化echarts实例
			let myChart = echarts.init(document.getElementById('custom-id2'))
			// 绘制图表
			myChart.setOption(option)
		}
	},
	mounted () {
		this.drawLine()
		this.drawLine2()
	}
}
</script>
<style lang='less' scoped>
.container {
	margin-top: 40px;
	width: 100%;
	height: 800px;

	#custom-id {
		width: 100%;
		height: 350px;
	}

	#custom-id2 {
		width: 100%;
		height: 350px;
	}

}
</style>
